<include file="Public/header"/>
<include file="Public/menu"/>
<style>
	button.cm { float: right; margin-left: 5px }
</style>
<div class="page-content">
	<div class="page-header">
		<h1>
			分类
			<small>
				<i class="icon-double-angle-right"></i>
				浏览分类
			</small>
		</h1>
	</div>
	<!-- /.page-header -->
	<!-- PAGE CONTENT BEGINS -->
	<div class="row">
		<div class="col-xs-12">

			<div class="row">
				<div class="tabbable">
					<ul class="nav nav-tabs" id="myTab">
						<li class="active">
							<a>
								<i class="green icon-home bigger-110"></i>
								浏览分类
							</a>
						</li>
						<li>
							<a href="http://localhost/vivo/Wolf/index.php/Admin/Category/add">
								<i class="green icon-edit bigger-110"></i>
								添加分类
							</a>
						</li>
					</ul>
					<div class="tab-content" style="font-size: 14px">
						<div class="row">
							<div class="col-sm-6">
								<div class="tabbable tabs-right">
									<ul class="nav nav-tabs" id="myTab3">
										<li class="active">
										<a href="http://localhost/vivo/Wolf/index.php/Admin/Category/index">

											全部

										</a>
										</li>
										<li>
											<a href="http://localhost/vivo/Wolf/index.php/Admin/Category/index/mid/9">
												职位												<span class="badge badge-danger">208</span>
											</a>
											</li><li>
											<a href="http://localhost/vivo/Wolf/index.php/Admin/Category/index/mid/8">
												新闻												<span class="badge badge-danger">4</span>
											</a>
											</li>									</ul>
									<div class="tab-content">
										<div id="home3" class="tab-pane in active">
											<div id="tree" class="tree tree-unselectable"><div class="tree-folder" style="display:none;">				<div class="tree-folder-header">					<i class="icon-plus"></i>					<div class="tree-folder-name"></div>				</div>				<div class="tree-folder-content"></div>				<div class="tree-loader" style="display: none;"></div>			</div>			<div class="tree-item" style="display:none;">				<i class="tree-dot"></i>				<div class="tree-item-name"></div>			</div><div class="tree-folder" style="display: block;">				<div class="tree-folder-header">					<i class="icon-plus"></i>					<div class="tree-folder-name">技术类<span data-id="2"></span></div>				</div>				<div class="tree-folder-content"></div>				<div class="tree-loader" style="display: none;"><div class="tree-loading"><i class="icon-refresh icon-spin blue"></i></div></div>			</div><div class="tree-folder" style="display: block;">				<div class="tree-folder-header">					<i class="icon-plus"></i>					<div class="tree-folder-name">产品类<span data-id="3"></span></div>				</div>				<div class="tree-folder-content"></div>				<div class="tree-loader" style="display: none;"><div class="tree-loading"><i class="icon-refresh icon-spin blue"></i></div></div>			</div><div class="tree-folder" style="display: block;">				<div class="tree-folder-header">					<i class="icon-plus"></i>					<div class="tree-folder-name">设计类<span data-id="15"></span></div>				</div>				<div class="tree-folder-content"></div>				<div class="tree-loader" style="display: none;"><div class="tree-loading"><i class="icon-refresh icon-spin blue"></i></div></div>			</div><div class="tree-folder" style="display: block; background: rgb(255, 255, 255) none repeat scroll 0% 0%;">				<div class="tree-folder-header">					<i class="icon-plus"></i>					<div class="tree-folder-name">运营/编辑类<span data-id="16"></span></div>				</div>				<div class="tree-folder-content"></div>				<div class="tree-loader" style="display: none;"><div class="tree-loading"><i class="icon-refresh icon-spin blue"></i></div></div>			</div><div class="tree-folder" style="display: block; background: rgb(255, 255, 255) none repeat scroll 0% 0%;">				<div style="background: rgb(255, 255, 255) none repeat scroll 0% 0%;" class="tree-folder-header">					<i class="icon-plus"></i>					<div class="tree-folder-name">市场/销售类<span data-id="17"></span></div>				</div>				<div class="tree-folder-content"></div>				<div class="tree-loader" style="display: none;"><div class="tree-loading"><i class="icon-refresh icon-spin blue"></i></div></div>			</div><div class="tree-folder" style="display: block; background: rgb(255, 255, 255) none repeat scroll 0% 0%;">				<div style="background: rgb(255, 255, 255) none repeat scroll 0% 0%;" class="tree-folder-header">					<i class="icon-plus"></i>					<div class="tree-folder-name">职能类<span data-id="18"></span></div>				</div>				<div class="tree-folder-content"></div>				<div class="tree-loader" style="display: none;"><div class="tree-loading"><i class="icon-refresh icon-spin blue"></i></div></div>			</div><div class="tree-item" style="display: block;">				<i class="tree-dot"></i>				<div class="tree-item-name">金融<span data-id="22"></span></div>			</div><div class="tree-item" style="display: block;">				<i class="tree-dot"></i>				<div class="tree-item-name">新媒体<span data-id="21"></span></div>			</div><div class="tree-item" style="display: block;">				<i class="tree-dot"></i>				<div class="tree-item-name">互联网<span data-id="19"></span></div>			</div><div class="tree-item" style="display: block;">				<i class="tree-dot"></i>				<div class="tree-item-name">移动互联网<span data-id="20"></span></div>			</div></div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- PAGE CONTENT END -->
</div>
</div>
</div>
<script>
	seajs.use(['$', 'bootbox', 'fuelux-tree', 'ace-elements'], function ($) {
		/*分类树 start*/
		var DataSourceTree = function (options) {
			this._data = options.data;
			this._delay = options.delay;
		};
		var tree_data = {};
		//从服务器端获取分类树
		$.ajax({
			url : "/vivo/Wolf/index.php/Admin/Category/lists",
			dataType : "json",
			type : "get",
			async : false,
			success : function (data) {
				if ( data ) {
					tree_data = data;
				}
			}
		});
		//编辑返回的分类树
		DataSourceTree.prototype.data = function (options, callback) {
			var self = this;
			var $data = null;

			if ( !("name" in options) && !("type" in options) ) {
				$data = this._data;//the root tree
				callback({data : $data});
				return;
			}
			else if ( "type" in options && options.type == "folder" ) {
				if ( "additionalParameters" in options && "children" in options.additionalParameters )
					$data = options.additionalParameters.children;
				else $data = {}//no data
			}

			if ( $data != null )//this setTimeout is only for mimicking some random delay
				setTimeout(function () {
					callback({data : $data});
				}, parseInt(Math.random() * 500) + 200);

		};

		//配置fuelux-tree
		var treeDataSource = new DataSourceTree({data : tree_data});
		$('#tree').ace_tree({
			dataSource : treeDataSource,
			multiSelect : true,
			loadingHTML : '<div class="tree-loading"><i class="icon-refresh icon-spin blue"></i></div>',
			'open-icon' : 'icon-minus',
			'close-icon' : 'icon-plus',
			'selectable' : false
		});
		/*分类树 end*/


		var htmls = '<button class="btn btn-minier btn-danger cm" id="del">删除</button>';
		htmls += '<button class="btn btn-minier btn-info cm" id="edit">编辑</button>';
		htmls += '<button class="btn btn-minier btn-inverse cm" id="addChild">添加子分类</button>';
		htmls += '<button class="btn btn-minier btn-inverse cm" id="dataid"></button>';

		/*鼠标划过时添加 编辑 删除 添加子分类按钮*/
		$(document).on("mouseenter", ".tree-item,.tree-folder-header", function () {
			$(this).append(htmls);
			$(this).css({background : "#ededed"});
			var id = $(this).find("span").attr('data-id');
			$("button#dataid").html("ID:"+id);
			$("button#edit").click(function (event) {
				event.stopPropagation();//阻止事件冒泡
				window.location.href = "/vivo/Wolf/index.php/Admin/Category/edit?id=" + id;
			});
			$("button#addChild").click(function (event) {
				event.stopPropagation();
				window.location.href = "/vivo/Wolf/index.php/Admin/Category/add?id=" + id;
			})
			$("button#del").click(function () {
				event.stopPropagation();
				if ( confirm("确定要删除该分类吗？") ) {
					$.ajax({
						url : "/vivo/Wolf/index.php/Admin/Category/delete",
						data : {id : id},
						type : "get",
						success : function (data) {
							if ( data.status > 0 ) {
								bootbox.confirm(data.info, function (result) {
									if ( result ) {
										window.location.reload();
										return false;
									}
								});
							} else {
								bootbox.alert({
									message : data.info,
									title : "提示信息"
								});
								return false;
							}
						}
					})
				}
			});
		});
		//鼠标划出时删除按钮
		$(document).on("mouseleave", ".tree-item,.tree-folder,.tree-folder-header", function () {
			$("button").remove(".cm");
			$(this).css({background : "#ffffff"});
		});

	})
</script>
<include file="Public/footer"/>

